<!--
* @FileDescription: 周日历组件
* @Author: yuec621@outlook.com
* @Date: 2024-11-22 12:37:35
* @LastEditors: Please set LastEditors
* @LastEditTime: 2024-12-30 12:37:35
-->
<template>
    <div class="weekBox">
        <div style="display: flex;justify-content: space-between;">
            <div>
                <span class="monBox">{{ dayjs(state.currentMonth).format('YYYY年MM月') }}</span>
                <span class="hover" @click="selectDate('prev')">
                    <svg-icon icon-class="zuo" /></span>
                <span class="hover" @click="selectDate('next')">
                    <svg-icon icon-class="you" /></span>
                <span class="todayBox hover" @click="selectDate('toweek')">本周</span>
            </div>
        </div>
        <div class="weekList">
            <div class="weekdayBox" v-for="(item,indexzhu) in state.weekList"
             :key="item.weekday">
                <span class="weekday">第{{ item.weekday=='1'?'一':item.weekday=='2'?'二' 
                :item.weekday=='3'?'三':item.weekday=='4'?'四':'五'}}周</span>
                <div class="weekdayRange">
                    <span :class="item.list.show?'dayListBox active' :'dayListBox'">
                        {{ dayjs(item.dayList[0]).format('MM/DD') }}-{{ dayjs(item.dayList[item.dayList.length-1]).format('MM/DD') }}
                    </span>
                    <span style="display: flex;">
                                <div class="dataalarm dataalarmsmall" style="display: flex;">
                                    <div class="dot" v-for="(itemfour,index) in 
                                    state.calendarList[indexzhu].events">
                                        <em :class="itemfour.eventType==0?'one':itemfour.eventType==1?'two'
                                        :itemfour.eventType==2?'thr':itemfour.eventType==3?
                                        'four':itemfour.eventType==4?'five':itemfour.eventType==5?
                                        'six':itemfour.eventType==6?'serve':''"></em>
                                    </div>
                                </div>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
    import {
        computed,
        nextTick,
        reactive,
        watchEffect
    } from 'vue';
    import axios from "@/utils/request"
    import {
        table_headers
    } from '@/components/commonCom/table_headers';
    import {
        searchchannelNoList
    } from '@/api/config'
    import useUserStore from "@/store/modules/user";
    import dayjs, {
        Dayjs
    } from 'dayjs';
    import duration from 'dayjs/plugin/duration' // ES 2015
    import weekOfYear from 'dayjs/plugin/weekOfYear'
    import isBetween from 'dayjs/plugin/isBetween'
    const {
        proxy
    } = getCurrentInstance();
    const userStore = useUserStore();
    const props = defineProps({
        tabledata: {
            type: Array,
            default: () => {
                return []
            }
        },
        date: {
            type: String,
            default: () => {
                return dayjs()
            }
        },
        calendarList: {
            type: Array,
            default: () => {
                return []
            }
        },
        legendList: {
            type: Array,
            default: () => {
                return []
            }
        },
    })
    // 重点
    const state = reactive({
        currentMonth: dayjs().format('YYYY年MM月'),
        weekList: [],
        tabType: 1,
        tabList: [{
                type: 1,
                name: '周'
            },
            {
                type: 2,
                name: '月'
            }
        ],
        legendList:[],
        calendarList:[]
    })

    async function selectDate(type) {
        if (type == 'toweek') {
            state.currentMonth = dayjs()
            state.weekList =await getWeeksAndDate(dayjs().format('YYYY'), dayjs().format('MM'))
        } else if (type == 'prev') {
            state.currentMonth = dayjs(state.currentMonth).subtract(1, 'month')
            state.weekList = await getWeeksAndDate(dayjs(state.currentMonth).format('YYYY'), dayjs(state.currentMonth).format(
                'MM'))
        } else if (type == 'next') {
            state.currentMonth = dayjs(state.currentMonth).add(1, 'month')
            state.weekList = await getWeeksAndDate(dayjs(state.currentMonth).format('YYYY'), dayjs(state.currentMonth).format(
                'MM'))
        }
    }
    //根据年月获取该月有几周并且每周的日期
   async function getWeeksAndDate(year, month) {
        var d = new Date();
        // 该月第一天
        d.setFullYear(year, month - 1, 1);
        var w1 = d.getDay();
        if (w1 == 0) w1 = 7;
        // 该月天数
        d.setFullYear(year, month, 0);
        var dd = d.getDate();
        // 第一个周一
        let d1;
        if (w1 != 1) d1 = 7 - w1 + 2;
        else d1 = 1;
        let week_count = Math.ceil((dd - d1 + 1) / 7); //每月有几周
        let weekList = []
        for (var weekday = 1; weekday <= week_count; weekday++) {
            var monday = d1 + (weekday - 1) * 7;
            var sunday = monday + 6;
            var from = year + "-" + month + "-" + monday;
            var to;
            if (sunday <= dd) {
                to = year + "-" + month + "-" + sunday;
            } else {
                d.setFullYear(year, month - 1, sunday);
                let days = d.getDate();
                to = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + days;
            }
            dayjs.extend(isBetween);
            let tod = dayjs().format('YYYY-MM-DD')
            weekList.push({
                weekday: weekday,
                list: {
                    from: from,
                    to: to,
                    show: dayjs(tod).isBetween(from, to, "day", "[)")
                },
                dayList: [0, 1, 2, 3, 4, 5, 6].map(item => {
                    return dayjs(dayjs(from).add(item, 'day')).format('YYYY-MM-DD')
                })
            })
        }
        await getcalendarList(weekList[0].list.from,weekList[weekList.length-1].list.to)
        console.log(weekList,'weekList');
        
        return weekList
    }
    function getcalendarList(startTime, endTime) {
        let data = {
            pointIds: state.legendList.map(item => {
                return item.pointId
            }),
            queryStartDate:startTime,
            queryEndDate:endTime,
            flag:"W"
        }
        axios.post('/pointData/eventCalendar', data).then(res => {
            state.calendarList = res.data
            console.log(state.calendarList,'state.calendarList');
            
        })
    }

    function tabClick(item) {
        state.tabType = item.type
    }

    watchEffect(async() => {
        state.legendList=props.legendList
        state.currentMonth = props.date
         state.weekList = await getWeeksAndDate(dayjs(props.date).format('YYYY'), dayjs(props.date).format('MM'))
   })
</script>
<style lang="scss" scoped>
    .weekBox {
        margin: 10px;

        .weekList {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
        }

        .weekdayBox {
            flex: 1;
            font-size: 14px;

            .weekday {
                padding: 4px 10px;
                display: inline-block;
                width: 100%;
                font-weight: 700;
                font-size: 16px;
                background-color: rgba(68, 136, 255, 0.16);
            }

            .weekdayRange {
                padding: 10px;
                border: 1px solid rgba(218, 231, 255, 1);
                min-height: 78px;
            }
        }

        .dayListBox {
            display: inline-block;
            margin-top: 10px;
            color: rgba(62, 70, 79, 1);
            padding: 4px;

            &.active {
                background-color: rgba(68, 136, 255, 1);
                border-radius: 20px;
                color: #fff;
            }
        }
    }

    .monBox {
        font-size: 14px;
        color: rgba(62, 70, 79, 1);
    }

    .todayBox {
        margin-left: 10px;
        font-size: 16px;
        border-radius: 2px;
        background: rgba(91, 109, 128, 0.08);
        padding: 4px 16px 4px 16px;
    }

    .dataalarm {
        display: flex;
        margin: 20px 16px 10px;

        &.dataalarmsmall {
            margin: 10px 4px 0;

            .dot {
                margin-right: 0px;

                em {
                    width: 4px;
                    height: 4px;

                    &::before {
                        width: 8px;
                        height: 8px;
                    }
                }
            }
        }

        .dot {
            font-size: 14px;
            border-radius: 50%;
            margin-right: 30px;
            display: flex;
            align-items: center;

            em {
                margin-right: 10px;
                display: block;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                // background-color: rgba(255, 153, 0, 1);
                position: relative;

                &::before {
                    position: absolute;
                    content: '';
                    left: 50%;
                    top: 50%;
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    transform: translate(-50%, -50%);
                    // background-color: rgba(255, 153, 0, 0.16);
                }

                &.one {
                    background-color: rgba(255, 153, 0, 1);

                    &::before {
                        background-color: rgba(255, 153, 0, 0.16);
                    }
                }

                &.two {
                    background-color: rgba(255, 85, 85, 1);

                    &::before {
                        background-color: rgba(255, 85, 85, 0.16);
                    }
                }

                &.thr {
                    background-color: rgba(170, 119, 238, 1);

                    &::before {
                        background-color: rgba(170, 119, 238, 0.16);
                    }
                }

                &.four {
                    background-color: rgba(136, 170, 204, 1);

                    &::before {
                        background-color: rgba(136, 170, 204, 0.16);
                    }
                }

                &.five {
                    background-color: rgba(238, 102, 187, 1);

                    &::before {
                        background-color: rgba(238, 102, 187, 0.16);
                    }
                }

                &.six {
                    background-color: rgba(85, 204, 238, 1);

                    &::before {
                        background-color: rgba(85, 204, 238, 0.16);
                    }
                }

                &.serve {
                    background-color: rgba(102, 136, 255, 1);

                    &::before {
                        background-color: rgba(102, 136, 255, .16);
                    }
                }
            }

        }
    }
</style>